<template>
	<view class="control">
		<view class="con-1">
			<view class="event-item">
				<view class="top flex-between">
					<view class="top-1">
						<image mode="aspectFit"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012543701432005.png">
						</image>
						<text>罗珊机器人</text>
					</view>
					<!-- <view class="top-2 flex-align">
						<text>/</text>
						<text>-</text>
						<text>/</text>
					</view> -->
					<!-- <view class="top-3 flex-align">
						<text>96</text>
						<view class="tag">live</view>
						<text>88</text>
					</view> -->
					<view class="top-4 flex-align">
						<text>96</text>
						<view>-</view>
						<text>88</text>
					</view>
					<view class="top-1">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012545061182362.png">
						</image>
						<text>布鲁克林篮网</text>
					</view>
				</view>
				<view class="bottom flex-between">
					<view class="bottom-1 active">
						未开始
					</view>
					<view class="bottom-2">
						2021/12/15 12:00
					</view>
				</view>
			</view>
		</view>

		<view class="table">
			<view class="th tr">
				<view class="td">球队</view>
				<view class="td">第一节</view>
				<view class="td">第二节</view>
				<view class="td">第三节</view>
				<view class="td">第四节</view>
				<view class="td">总分</view>
			</view>
			<view class="table-con">
				<view class="tr tr-con">
					<view class="td">
						<image mode="aspectFit"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012543701432005.png">
						</image>
					</view>
					<view class="td">20</view>
					<view class="td">20</view>
					<view class="td">20</view>
					<view class="td">20</view>
					<view class="td">100</view>
				</view>
				<view class="tr tr-con">
					<view class="td">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012545061182362.png">
						</image>
					</view>
					<view class="td">20</view>
					<view class="td">20</view>
					<view class="td">20</view>
					<view class="td">20</view>
					<view class="td">100</view>
				</view>
			</view>
		</view>

		<view class="con-2">
			<view class="con-2-title">
				球队统计
			</view>
			<view class="flex-between">
				<view class="flex-center icon">
					<image mode="aspectFit"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012543701432005.png">
					</image>
				</view>
				<view class="flex-center icon">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012545061182362.png">
					</image>
				</view>
			</view>
			<view class="score">
				<view class="score-item">
					<view class="top flex-between">
						<view>45</view>
						<view class="name">篮板</view>
						<view>40</view>
					</view>
					<view class="bottom flex-between">
						<view class="bottom-1">
							<view class="progress active" style="width: 50%;"></view>
						</view>
						<view class="bottom-1">
							<view class="progress" style="width: 30%;"></view>
						</view>
					</view>
				</view>
				<view class="score-item">
					<view class="top flex-between">
						<view>26</view>
						<view class="name">助攻</view>
						<view>28</view>
					</view>
					<view class="bottom flex-between">
						<view class="bottom-1">
							<view class="progress " style="width: 50%;"></view>
						</view>
						<view class="bottom-1">
							<view class="progress active2" style="width: 80%;"></view>
						</view>
					</view>
				</view>
				<view class="score-item">
					<view class="top flex-between">
						<view>3</view>
						<view class="name">抢断</view>
						<view>40</view>
					</view>
					<view class="bottom flex-between">
						<view class="bottom-1">
							<view class="progress active" style="width: 90%;"></view>
						</view>
						<view class="bottom-1">
							<view class="progress" style="width: 30%;"></view>
						</view>
					</view>
				</view>
				<view class="score-item">
					<view class="top flex-between">
						<view>45</view>
						<view class="name">盖帽</view>
						<view>40</view>
					</view>
					<view class="bottom flex-between">
						<view class="bottom-1">
							<view class="progress" style="width: 10%;"></view>
						</view>
						<view class="bottom-1">
							<view class="progress active2" style="width: 30%;"></view>
						</view>
					</view>
				</view>

			</view>
		</view>
		
		<view class="con-3 ">
			<view class="con-2-title">
				球队统计
			</view>
			<view class="btn-list flex-align">
				<view class="btn">洛杉矶湖人</view>
				<view class="btn">布鲁克林网</view>
			</view>
			<view class="table">
				<view class="th tr">
					<view class="td">球员</view>
					<view class="td">得分</view>
					<view class="td">篮板</view>
					<view class="td">助攻</view>
					<view class="td">抢断</view>
					<view class="td">犯规</view>
				</view>
				
				<view class="table-con">
					<view class="tr tr-con" v-for="item in 5" :key="item">
						<view class="td">
							托尼托尼
						</view>
						<view class="td">28</view>
						<view class="td">28</view>
						<view class="td">28</view>
						<view class="td">2</view>
						<view class="td">5</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		height: 100%;
		background-color: #f3f3f3;

		.con-1 {
			background-color: rgb(255, 255, 255);
			padding: 0px 60rpx;

			.event-item {
				margin-bottom: 30rpx;

				.top {
					padding: 17rpx 33rpx 27rpx;

					.top-1 {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: rgb(51, 51, 51);
						font-size: 22rpx;
						font-weight: 700;

						image {
							width: 75rpx;
							height: 75rpx;
						}
					}

					.top-2 {
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						font-weight: 700;

						text+text {
							margin-left: 17px;
						}
					}

					.top-3 {
						text {
							color: rgb(51, 51, 51);
							font-size: 28rpx;
							font-weight: 700;

							&:last-of-type {
								margin-left: 17rpx;
								color: rgb(153, 153, 153);
							}
						}

						.tag {
							color: rgb(255, 255, 255);
							padding: 2rpx 5rpx;
							font-size: 22rpx;
							font-weight: 700;
							background-color: rgb(255, 65, 5);
						}
					}

					.top-4 {
						text {
							color: rgb(51, 51, 51);
							font-size: 28rpx;
							font-weight: 700;

							&:last-of-type {
								margin-left: 17rpx;
								color: rgb(153, 153, 153);
							}
						}

						view {
							margin: 0px 36rpx;
							color: rgb(51, 51, 51);
							font-size: 22rpx;
						}
					}
				}

				.bottom {
					padding: 20rpx 32rpx 19rpx;
					color: #999999;
					font-size: 22rpx;
					border-top: solid 1rpx #efefef;

					.bottom-1 {
						font-size: 22rpx;
					}

					.active {
						color: rgb(255, 65, 5);
					}
				}
			}
		}

		.table {
			.tr {
				display: flex;
				align-items: center;

				.td {
					color: #333333;
					font-size: 24rpx;
					font-weight: 700;
					text-align: center;
					width: 17%;
					white-space: nowrap;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.td:nth-of-type(1) {
					flex: 1;
				}

			}

			.table-con {
				background-color: white;
				padding: 20rpx 31rpx;
			}
			.tr-con{
				margin-bottom: 30rpx;
			}

			.th {
				padding: 19rpx 30rpx;
				font-family: PingFang SC;
				background-color: #f3f3f3;
			}
		}

		.con-2 {
			margin-top: 20rpx;
			padding: 29rpx 20rpx 30rpx;
			background-color: #ffffff;

			.con-2-title {
				color: #333333;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 700;
				margin-bottom: 29rpx;
			}

			.icon {
				width: 50%;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.score {
				.score-item {
					.top {
						padding: 30rpx 0 24rpx;
						color: #333333;
						font-size: 29rpx;
						font-weight: 700;

						.name {
							color: #666666;
							font-size: 26rpx;
							font-weight: 500;
						}
					}

					.bottom {
						.bottom-1 {
							width: 49%;
							background-color: #f9f9f9;
							height: 10rpx;
							position: relative;

							.progress {
								position: absolute;
								height: 100%;
								background-color: #bebebe;
							}

							&:nth-of-type(1) .progress {
								right: 0;
							}
						}

						.active {
							background-color: #fcb827 !important;
						}

						.active2 {
							background-color: #010101 !important;
						}
					}
				}
			}
		}
		.con-3{
			margin-top: 20rpx;
			padding: 29rpx 20rpx 30rpx;
			background-color: #ffffff;
			.con-2-title {
				color: #333333;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 700;
				margin-bottom: 29rpx;
			}
			.btn-list {
				padding: 6rpx 10rpx 10rpx;
				margin-bottom: 20rpx;
				.btn {
					padding: 15rpx 15rpx;
					color: rgb(255, 254, 254);
					font-size: 26rpx;
					font-weight: 700;
					white-space: nowrap;
					background-color: rgb(47, 117, 250);
					border-radius: 10rpx;
			
					&+.btn {
						margin-left: 21rpx;
						color: rgb(47, 117, 250);
						background-color: rgba(47, 117, 250, 0.2);
					}
				}
			}
			.table{
				.tr-con .td{
					font-weight: 400;
				}
			}
		}
	}
</style>
